<template lang="pug">
.chartIndicators-wrapper
  ECharts.pie-chart(
    theme='myEchart'
    ref='pieChart'
    auto-resize
    :options="options"
    @click="selectPie")
  span.btn-export.iconfont.icon-export(
    title='导出'
    @click="fileEvent('/pn/dpa/stat/supply/export')")

</template>
<script>
/**
 * @name PartionInfo 供水量饼状图
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示各地区供水量占比
 *参数：
 */
// import echarts from 'vue-echarts/dist/vue-echarts.js'
export default {
  props: {
    callbackData: {
      areaId: Number,
      timeRange: Array,
      selectedData: Object
    }
  },
  data () {
    return {
      options: {
        tooltip: {
          trigger: 'item',
          formatter: (param) => {
            let format = ''
            format = param.name + '<br> &nbsp;'
            format = format.concat(param.marker + param.seriesName + '：' + (this.formatValue(param.value) || '-') + ' m³<br>')
            return format
          },
          textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          }
        },
        legend: {
          right: '4%',
          type: 'scroll',
          orient: 'vertical',
          top: 40,
          bottom: 10,
          itemWidth: 14,
          itemGap: 6,
          data: []
        },
        grid: [{
          x: '5%',
          y: '20%',
          width: '38%',
          height: '60%'}],
        series: [
          {
            name: '供水量',
            type: 'pie',
            center: ['40%', '50%'],
            // selectedMode: 'single',
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              borderColor: '#ececec',
              borderWidth: '1',
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            data: []
          }
        ]
      }
    }
  },
  methods: {
    getData () {
      this.$get({
        url: '/pn/dpa/stat/supply',
        params: {
          'startTime': this.callbackData.timeRange[0].getTime(),
          'endTime': this.callbackData.timeRange[1].getTime()
        }
      }).then((res) => {
        if (!res.data) return
        this.options.series[0].data = res.data.map((item) => {
          return {
            value: item.value,
            name: item.name,
            num: item.id
          }
        })
        this.options.legend.data = res.data.map((item) => {
          return item.name
        })
        this.$nextTick(() => {
          this.highlightPie(0, this.callbackData.selectedData.dataIndex)
        })
      })
    },
    // 点击获取所选项的参数
    selectPie (params) {
      this.$emit('selectAreaPie', params)
    },
    // 使分区高亮
    highlightPie (seriesIndex, dataIndex) {
      this.$refs.pieChart.dispatchAction({
        type: 'pieSelect',
        seriesIndex,
        dataIndex
      })
      this.$refs.pieChart.dispatchAction({
        type: 'showTip',
        seriesIndex,
        dataIndex
      })
    },
    fileEvent (url, filterBy) {
      this.$get({
        url,
        params: {
          'startTime': this.callbackData.timeRange[0].getTime(),
          'endTime': this.callbackData.timeRange[1].getTime()
        }
      }).then((res) => {
        if (!res.data) {
          this.$alert('导出失败！')
          return
        }
        // 生成a标签，模拟click下载files
        let a = document.createElement('a')
        a.href = `/api/dxbase/download/${res.data.shortUrl}`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        event.stopPropagation()
        event.preventDefault()
      })
    },
    formatValue (data) {
      return (data === null || data === undefined) ? null : parseFloat(data).toFixed(3)
    }
  },
  mounted () {
    this.getData()
    this.$refs.pieChart.dispatchAction({
      type: 'highlight',
      // 可选，系列 index，可以是一个数组指定多个系列
      seriesIndex: 0,
      // 可选，系列名称，可以是一个数组指定多个系列
      seriesName: '供水量',
      // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
      dataIndex: 0,
      // 可选，数据名称，在有 dataIndex 的时候忽略
      name: '上环'
    })
  }
}
</script>

<style lang="sass" scoped>
.chartIndicators-wrapper
  width: 100%
  background-color: lightblue
  flex-grow: 1
  height: 50px
  position: relative
  .btn-export
    color: #a0a0a0
    font-size: 20px
    position: absolute
    right: 12px
    top: 12px
    cursor: pointer
  .pie-chart
    width: 100%
    height: 100%
    background-color: #fff
</style>
